<template>
  <div class="novel-contents">
    <van-nav-bar
        title="目录"
        left-arrow
        @click-left="onClickLeft"
        fixed
        class="nav-header"
    />
    <van-loading v-if="isLoading" style="margin-top: 100px;background-color: white" type="spinner" size="24px" color="#1989fa" />
    <div class="placeholder" style="background-color: white"></div>

    <van-list v-if="isLoading==false" class="chapter-list">
      <van-cell
          v-for="(item, index) in catalog"
          :key="index"
          class="chapter-item"
          :class="{'vip-chapter': item.isVip}"
          @click="goToChapter(item)"
      >
        <template #title>
          <div class="chapter-title">
            <span class="chapter-index">{{ index + 1 }}</span>
            <span class="title-text">{{ item.title || `前言` }}</span>
            <span v-if="item.vip==2" class="vip-tag">VIP</span>
            <span v-else class="free-tag">免费</span>
          </div>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      catalog: [],
      isLoading: false,
    };
  },

  created() {
    this.fetchData();
  },

  methods: {

    async fetchData() {
      this.isLoading = true;
      try {
        // 这里假设使用axios进行网络请求
        axios.post('http://localhost:9999/api-novel/books/list?pid='+ this.$route.query.id).then(res => {
          this.catalog = res.data;
          if (this.catalog!=null){
            this.isLoading = false;
          }
        })
      } catch (error) {
        console.error(error);
      }
    },

    goToChapter(item) {
      // 处理章节点击事件
      this.$router.push({
        path: '/xs1',
        query: {
          id: item.chapter_id,
          pid: this.$route.query.id,
        }
      })
    },

    onClickLeft() {
      this.$router.back()
    }
  }
};
</script>

<style scoped>
.novel-contents {
  background: #f5f5f5;
}

.nav-header {
  background: #fff;
  border-bottom: 1px solid #eee;
}

.placeholder {
  height: 46px;
}

.chapter-list .chapter-item {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  background: #fff;
  margin: 0;
}

.chapter-list .chapter-item:active {
  background: #f0f0f0;
}

.chapter-title {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #333;
}

.chapter-index {
  color: #666;
  margin-right: 10px;
  font-size: 14px;
  min-width: 24px;
}

.title-text {
  flex: 1;
}

.vip-tag,
.free-tag {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  margin-left: 8px;
}

.vip-tag {
  background: #FFE4E1;
  color: #FF4500;
}

.free-tag {
  background: #E1FFE4;
  color: #00AA00;
}

.vip-chapter .chapter-title {
  color: #FF6B6B;
}

:deep(.van-nav-bar__title) {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

:deep(.van-nav-bar .van-icon) {
  color: #333;
}
</style>
